<template>
  <div ref="searchContainer" class="tools-library">
    <div v-if="data && data.length">
        <NewTools 
          v-for="(val, key) in data" 
          :key="key" 
          :tools="val.list" 
          :total="val.total" 
          :title="val.title" 
          :category-id="val.categoryId" 
        />
    </div>

    <a-float-button
      v-show="showBackTop"
      type="primary"
      :style="{
        right: '24px',
      }"
      @click="scrollToTop"
    >
      <template #icon>
        <VerticalAlignTopOutlined />
      </template>
    </a-float-button>
  </div>
</template>

<script setup lang="ts">
/**
 * 首页组件脚本
 * 网站主页，展示AI工具分类和工具列表
 * 包含SEO优化、回到顶部功能等
 */

/**
 * 页面标题
 * 用于浏览器标签页和SEO优化
 */
const title = 'AI工具集官网 | 1000+ AI工具集合，国内外AI工具集导航大全';

/**
 * 页面描述
 * 用于SEO优化和社交媒体分享
 */
const description = 'AI工具集官网收录了国内外数百个AI工具，该导航网站包括AI写作工具、AI图像生成和背景移除、AI视频制作、AI音频转录、AI辅助编程、AI音乐生成、AI绘画设计、AI对话聊天等AI工具集合大全，以及AI学习开发的常用网站、框架和模型，帮助你加入人工智能浪潮，自动化高效完成任务！';

/**
 * 设置页面头部信息
 * 包括标题、描述、关键词等SEO相关信息
 */
useHead({
  title,
  meta: [
    // 页面描述
    { name: 'description', content: description },
    // SEO关键词
    { name: 'keywords', content: 'AI工具集,AI工具集官网,AI工具集网站,AI工具集导航,ai-bot.cn,AI工具集导航官网,AI工具导航,AI工具大全,AI网站大全,AI软件大全,AI工具集合,AI工具集合网,AI工具库,AI工具箱,AI工具箱导航' },
    // Open Graph协议标签，用于社交媒体分享
    { property: 'og:title', content: '1000+ AI工具集合，国内外AI工具集导航大全' },
    { property: 'og:description', content: description },
    { property: 'og:type', content: 'article' },
    // 搜索引擎爬虫指令
    { name: 'robots', content: 'index, follow' },
  ],
  link: [
    // 预留的链接配置
    { },
  ]
})

/**
 * 获取首页数据
 * 从/home API获取工具分类和工具列表数据
 */
const { data } = await $fetch('/api/tools-with-tags', {
  method: 'POST',
  body: {
    categoryIds: [1, 2],
    pageNum: 1,
    pageSize: 6
  }
})

/**
 * 回到顶部按钮显示状态
 * 控制回到顶部按钮的显示和隐藏
 */
const showBackTop = ref(false)

/**
 * 滚动到页面顶部
 * 使用平滑滚动效果回到页面顶部
 */
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

</script>

<style lang="less" scoped>
.tools-library {
  color: var(--text-color);
  padding: 20px;
  transition: color 0.3s ease;
  padding-bottom: 60px; /* 为固定footer留出空间 */

  .search-container {
    margin-bottom: 24px;
    max-width: 600px;
  }

  .category-tabs {
    margin-bottom: 24px;
  }
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .tools-library {
    padding: 24px;
  }
}

/* 暗黑模式下的 banner 颜色调整 */
html.dark {
  .hero-banner {
    background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
    
    &::before {
      background: rgba(0, 0, 0, 0.2);
    }
  }

  .assistant-banner {
    background-color: rgba(24, 144, 255, 0.1) !important;
  }

  .toolkit-banner {
    background-color: rgba(82, 196, 26, 0.1) !important;
  }
}
</style>
